<template>
  <!--新增用户-->
  <div>
    <el-col>
      <div class="header">当前用户名:{{obj.userName}}</div>
    </el-col>
    <el-table :data="obj.userDevices">
      <el-table-column prop="type" label="类型" align="center" width="65">
        <template scope="scope">
          <span v-if="scope.row.type == 0">PC端</span>
          <span v-if="scope.row.type == 1">移动端</span>
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="是否禁用" align="center" min-width="100">
        <template scope="scope">
          <span v-if="scope.row.flag == 0">否</span>
          <span v-if="scope.row.flag == 1">是</span>
        </template>
      </el-table-column>
      <el-table-column prop="validate" label="设备锁状态" align="center" min-width="100">
        <template scope="scope">
          <span v-if="scope.row.validate == 0">停用</span>
          <span v-if="scope.row.validate == 1">启用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="140">
        <template scope="scope">
          <el-button v-if="scope.row.flag===1" @click="hangleFacility(scope,0)" type="text" size="small">启用设备</el-button>
          <el-button v-else @click="hangleFacility(scope,1)" type="text" size="small">禁用设备</el-button>
          <el-button v-if="scope.row.validate===0" @click="hangleLock(scope,1)" type="text" size="small">启用设备锁</el-button>
          <el-button v-else @click="hangleLock(scope,0)" type="text" size="small">停用设备锁</el-button>
          <el-button @click="resetfacility(scope)" type="text" size="small">重置设备</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import server from '@/config/servers'
  import net from '@/util/net'

  export default {
    name: 'facility-manage',
    data() {
      return {
        servers: {
          handleFacility: server.SystemManage.handle_facility, // 是否禁用设备
          handleLock: server.SystemManage.handle_lock, // 启用停用设备锁
          resetLock: server.SystemManage.reset_lock // 重置设备
        },
        obj: {
          userDevices: []
        }
      }
    },
    methods: {
      /**
       * 启用禁用设备
       */
      hangleFacility(scope, handle) {
        this.$confirm(`您确定要对用户${this.obj.userName}执行该操作吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          net.send({
            server: this.servers.handleFacility,
            data: {
              userIds: [this.obj.userId],
              usdeType: scope.row.type,
              usdeFlag: handle
            }
          }).then(() => {
            scope.row.flag = handle
            // 更新数据信息
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        })
      },
      /**
       * 启用停用设备锁
       */
      hangleLock(scope, handle) {
        this.$confirm(`您确定要对用户${this.obj.userName}执行该操作吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          net.send({
            server: this.servers.handleLock,
            data: {
              userIds: [this.obj.userId],
              usdeType: scope.row.type,
              validate: handle
            }
          }).then(() => {
            // 更新数据信息
            scope.row.validate = handle
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        })
      },
      /**
       * 重置设备
       */
      resetfacility(scope) {
        this.$confirm(`您确定要对用户${this.obj.userName}执行该操作吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          net.send({
            server: this.servers.resetLock,
            data: {
              userIds: [this.obj.userId],
              usdeType: scope.row.type
            }
          }).then(() => {
            // 更新数据信息
            scope.row.code = ''
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        })
      },
      /**
       * 刷新
       */
      refresh(obj) {
        this.obj = obj
        this.tableData = obj.userDevices
      }
    },
    components: {

    },
    mounted() {}
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header {
    margin: 10px 0;
    font-size: 0.875rem;
    color: rgb(31, 45, 61);
    text-align: left;
  }

</style>
